<template>
	<view>
		<picker @change="changePicker" :value="index" :range="columns" range-key="name">
			<view :class="label?'':' noinp'">
				{{label || '请选择付款方式'}}
			</view>
		</picker>
	</view>
</template>

<script>
	import {
		dictionary
	} from '@/api/subletOfShop.js'
	export default {
		props: {
			value: {
				type: [String, Number],
				default: () => ({})
			}
		},
		watch: {
			value: {
				handler() {
					console.log("valu", this.value)
					this.initLabel();
				},
				immediate: true
			}
		},
		data() {
			return {
				columns: [],
				index: 0,
				label: ''
			}
		},
		mounted() {
			this.getColums();
		},
		methods: {
			initLabel() {
				if(this.columns.length>0 && this.value){
					this.dealData()
				}else if(this.value){
					this.getColums(()=>{
						if (!this.value) {
							console.log("this.columns[1]", this.columns[1])
							this.$emit('input', this.columns[1].id)
						
						}else{
							this.dealData()
						}
					})
				}else{
					this.label = ''
				}
				
			},
			dealData(){
				let pt = this.columns.filter(item => item.id == this.value);
				console.log('label', pt)
				this.$nextTick(() => {
					this.label = pt.length > 0 ? pt[0].name : this.label;
					console.log('this.label', this.label)
				})
			},
			getColums(callback) {
				dictionary({
					gids: '27'
				}).then(res => {
					console.log("zd", res)
					this.columns = res.data['27']
					callback&&callback();
					// if (!this.value) {
					// 	console.log("this.columns[1]", this.columns[1])
					// 	this.$emit('input', this.columns[1].id)

					// }
				})
			},
			changePicker(e) {
				console.log("e", e)
				let pt = this.columns[e.detail.value];
				this.$emit('input', pt.id)
			}
		}
	}
</script>

<style scoped>
	.noinp {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #D8D8D8;
	}
</style>